<template>
    <el-dialog width="80%" v-model="props.LinkShow" title="选择链接" :before-close="handleClose">
        <el-card class="box-card">
            <NTabs v-model="selectedTab" :list="tabList"></NTabs>
        </el-card>
        <component ref="cpnref" :is="component" class="mt-36px"></component>
        <template #footer>
            <span class="dialog-footer">
                <el-button>取消</el-button>
                <el-button @click="addLink" type="primary">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineComponent, defineProps, defineEmits, computed, ref, defineExpose } from 'vue';
import NTabs from '@/components/PageTabs'

const props = defineProps({
    LinkShow: Boolean
})
defineComponent({
    components: {
        NTabs
    }
})
const emits = defineEmits('update:LinkShow')
function handleClose() {
    emits('update:LinkShow', false)
}

import MysteryBox from './MysteryBox.vue'
import Activity from './Activity.vue'
import Article from './Article.vue'
import Commodity from './Commodity.vue'
import Other from './Other.vue'


const component = computed(() => {
    let map = {
        MysteryBox: MysteryBox,
        Activity: Activity,
        Article: Article,
        Commodity: Commodity,
        Other: Other,
    }

    return map[selectedTab.value]
})

const selectedTab = ref('MysteryBox')

const tabList = [
    { label: '盲盒', name: 'MysteryBox' },
    { label: '商品', name: 'Commodity' },
    { label: '活动', name: 'Activity' },
    { label: '文章', name: 'Article' },
    { label: '其他', name: 'Other' },
]

const cpnref = ref(null)
const Pickid = ref()
const type = ref()
function addLink() {
    Pickid.value = cpnref.value.Pickid
    type.value = cpnref.value.type
    handleClose()
}
defineExpose({ Pickid, type })

</script>

<style lang="scss" scoped>
.box-card {
    width: 100%;
    height: 96px;
}

.mt-36px {
    margin-top: 36px;
}
</style>